// 
// 退出dom元素
const logout = document.querySelector('#logout');
// 渲染主体dom元素
const tbody = document.querySelector('.list');
// 模态框dom元素
const modal = document.querySelector('#modal');
// 添加按钮dom元素
const add = document.querySelector('#openModal');
// 表单form元素
const form = document.querySelector('#form');
// 省dom元素
const provinceDom = document.querySelector('[name="province"]');
// 市dom元素
const cityDom = document.querySelector('[name="city"]');
// 悬dom元素
const areaDom = document.querySelector('[name="area"]');
// 模态框标题
const modalText = document.querySelector('.modal-title');
// 交叉清空表单
const x = document.querySelector('.btn-close');
logout.addEventListener('click', function (e) {
    console.log('1');

    if (confirm("你确定要退出吗？")) {

        location.href = "./login.html"
        localStorage.removeItem("msc90")
    }


})
// 1、渲染学生页面
// 获取列表数据
async function StudentList() {
    const result = await axios({ url: "/students" })
    // console.log(result);
    // 路径：data.data
    const list = result.data.data
    const html = list.reduce((prve, item) => {
        // 对象解构
        const { name, age, gender, group, hope_salary, salary, province, city, area, id } = item
        return prve + `
        <tr>
                      <td>${name}</td>
                      <td>${age}</td>
                      <td>${gender == 1 ? '女' : '男'}</td>
                      <td>${group}</td>
                      <td>${hope_salary}</td>
                      <td>${salary}</td>
                      <td>${province + city + area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i data-id="${id}" class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i data-id="${id}" class="bi bi-trash"></i></a>
                      </td>
                    </tr>
        
        
        `
    }, "")
    tbody.innerHTML = html
}
StudentList()
// 2、打开模态框
add.addEventListener('click', function (e) {
    $("#modal").modal("show");
    modalText.innerHTML = "添加学员"

})
// 优化获取省市县数据
function init() {
    // 封装省数据
    getprovince()
    // 省绑定change事件
    provinceDom.addEventListener('change', async function (e) {
        getCity(provinceDom.value)
    })
    // 市绑定 change事件
    cityDom.addEventListener('change', async function (e) {
        getArea(provinceDom.value, cityDom.value)
    })
}
init()
// 全局变量id
let id

// 3、提交
form.addEventListener('submit', async function (e) {
    e.preventDefault();
    // 全局 result
    let result
    const data = serialize(form, { hash: true, empty: true })
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    if (modalText.innerHTML === "添加学员") {
        result = await axios({
            url: "/students",
            method: "POST",
            data
        })
        console.log(result);
        // status
        if (result.status === 201) {
            toastr.success("添加成功！");
        }
        // 关闭模态框
        $("#modal").modal("hide");
        // 重置表单
        form.reset()
        // 重新刷新
        StudentList()
    } else if (modalText.innerHTML === "编辑学员") {
        result = await axios({
            url: `/students/${id}`,
            method: "PUT",
            data: data
        })
        console.log(result);
        if (result.status === 200) {
            toastr.success("修改成功！");
        }
        // 关闭模态框
        $("#modal").modal("hide");
        // 重置表单
        form.reset()
        // 重新刷新
        StudentList()

    }

})


// 4.1、获取省数据
async function getprovince() {
    const result = await axios({
        url: "/api/province"
    })
    const list = result.data.data
    const html = list.reduce((prve, item) => {
        return prve + `
         <option value="${item}">--${item}--</option>
        `
    }, `<option  value="">--省--</option>`)
    provinceDom.innerHTML = html
}

//4.2、 获取城市数据
async function getCity(pname) {
    // console.log(provinceDom.value);
    const result = await axios({
        url: "/api/city",
        params: { pname }
    })
    // console.log(result);
    const list = result.data.data
    const html = list.reduce((prve, item) => {
        return prve + `
        <option value="${item}">--${item}--</option>
        
        `
    }, `<option  value="">--市--</option>`)
    cityDom.innerHTML = html
    // 还原地区
    areaDom.innerHTML = `<option  value="">--地区--</option>`
}

// 4、3 获取县数据
async function getArea(pname, cname) {
    const result = await axios({
        url: "/api/area",
        params: { pname, cname }
    })
    console.log(result);
    const list = result.data.data
    const html = list.reduce((prve, item) => {
        return prve + `
        <option value="${item}">--${item}--</option>
        
        `
    }, `<option  value="">--地区--</option>`)
    areaDom.innerHTML = html
}
//5、 删除功能模块
tbody.addEventListener('click', async function (e) {
    if (e.target.classList.contains("bi-trash")) {
        if (confirm("是否要删除？")) {
            const { id } = e.target.dataset
            const result = await axios({
                url: `/students/${id}`,
                method: "delete"
            })
            console.log(result);
            if (result.status === 204) {
                toastr.success("删除成功！");
            }
            StudentList()
        }
    }
})
// 6、编辑
tbody.addEventListener('click', async function (e) {
    if (e.target.classList.contains("bi-pen")) {
        // 打开模态框
        $("#modal").modal("show");
        // 修改模态框标题
        modalText.innerHTML = "编辑学员"
        // 根据id来修改
        id = e.target.dataset.id
        // console.log(id);
        // 发送请求获得数据
        const result = await axios({
            url: `/students/${id}`,
            params: { id }
        })
        const data = result.data.data
        console.log(data);
        // 解构
        form.querySelector(`[name=name]`).value = data.name
        form.querySelector(`[name=age]`).value = data.age
        form.querySelector(`[name=group]`).value = data.group
        form.querySelector(`[name=hope_salary]`).value = data.hope_salary
        form.querySelector(`[name=salary]`).value = data.salary
        // 性别
        form.querySelector(`[name=gender][value='${data.gender}']`).checked = true
        // 动态的设置城市对应的option

        await getCity(data.province)
        form.querySelector(`[name=city]`).value = data.city
        await getArea(data.province, data.city)
        form.querySelector(`[name=area]`).value = data.area
        form.querySelector(`[name=province]`).value = data.province

        // 动态的设置县对应的option



    }
})
// 交叉取消表单
x.addEventListener('click', function (e) {
    // 重置表单
    form.reset()
})